<template>
  <div class="addFriendDialog width_100 height_100"  v-if="showDialog">
    <div class="addFriendBox">
      <header class="flex-between">
        <span>添加好友</span>
        <img src="@/assets/dialogBox/images/close.png" alt="" class="cp" @click="toggleShow" />
      </header>
      <div class="content">
        <div class="inputbox">
          <input type="text" placeholder="请输入手机号" :class="{'error': errorMessage}" v-model="phone" @keyup="resetError"/>
          <p>{{errorMessage}}</p>
        </div>
      </div>
      <footer class="flex-center">
        <div class="btn-blue2" @click="Confirm">确定</div>
        <div class="btn-white2" @click="toggleShow">取消</div>
      </footer>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      phone: '', // 手机号
      showDialog: false, // 显示添加框
      errorMessage: ''
    }
  },
  methods: {
    toggleShow () {
      this.showDialog = !this.showDialog
    },
    // 重置错误信息
    resetError () {
      if (this.errorMessage) {
        this.errorMessage = ''
      }
    },
    Confirm () {
      // 确认
      if (!this.phone.trim().length) {
        this.errorMessage = '请输入'
        return false
      }
      if (!this.tools.validate.mobileValidate(this.phone)) {
        this.errorMessage = '手机号格式错误，请重新输入'
        return false
      }
      this.$store.dispatch('addressList/searchUser', this.phone).then(res => {
        if (res.data && res.data.code === 200) {
          if (!res.data.data.exists) {
            this.errorMessage = '无法找到该用户！'
            return false
          } else {
            this.showDialog = false
            this.$store.commit('common/set_userInfoType', 1)
            this.$store.commit('common/set_ifShowUserInfo', true)
          }
        }
      })
      this.phone = ''
    }
  }
}
</script>

<style lang="scss" scoped>
  .addFriendDialog{
    position: fixed;
    z-index: 1999;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    .addFriendBox{
      width: 560px;
      height: 300px;
      background: #ffffff;
      border-radius: 4px;
      padding: 20px;
      margin: 261px auto 0 ;
      header{
        span{
          font-size: 18px;
          font-family: PingFangSC, PingFangSC-Medium;
          font-weight: 500;
          color: #0D172C;
          letter-spacing: 0px;
        }
        img{
          width: 16px;
        }
      }
      .content{
        margin-top: 60px;
        .inputbox{
          text-align: center;
          input{
            width: 400px;
            height: 44px;
            opacity: 1;
            border: 1px solid #d8dee9;
            border-radius: 3px;
            font-size: 16px;
            font-family: PingFangSC, PingFangSC-Regular;
            font-weight: 400;
            text-align: left;
            color: #0D172C;
            line-height: 44px;
            letter-spacing: 0px;
            padding-left: 16px;
          }
          .error {
            border: 1px solid #ff2929;
          }
          p{
            margin: 5px auto 0;
            width: 400px;
            height: 17px;
            opacity: 1;
            font-size: 12px;
            font-family: PingFangTC, PingFangTC-Regular;
            font-weight: 400;
            text-align: left;
            color: #ff2929;
            line-height: 17px;
          }
        }
      }
      footer{
        margin-top: 57px;
      }
    }
  }
</style>
